﻿$(function () {
    //obtenemos el hub
    var servicioPartidas = $.connection.partidaHub; 
    //iniciamos la conexión y una vez iniciada llamamos a nuestra función de inicialización
    $.connection.hub.start().done(init);
    
    var pais = "Mallorca";

    function init() {
        nombre = prompt("Escribe tu nombre");
        //llamamos a una función de servidor que nos devuelve una lista de partidas
        //que se realizan en Mallorca :)
        servicioPartidas.server.partidasDisponibles(pais).done(function (list) {
            $partidas.empty();
            $.each(list, function () {
                crearEntrada(this);
            });

        });
        //botón nueva partida
        $btnEmpezar.bind("click", null, function (e) {
            servicioPartidas.server.nuevaPartida(pais, nombre);
            return false;
        });
        //inicializamos los recuadros del 3 en raya
        for (var row = 0; row < 3; row++) {
            for (var col = 0; col < 3; col++) {
                var $celda = $(".row" + row + " .col" + col);
                $celda.click(function () {
                    var x = row;
                    var y = col;
                    return function () {
                        if (partidaActual != null) {
                            servicioPartidas.server.marcaCasilla(partidaActual.Pais, partidaActual.Id, x, y);
                        }
                    }
                }());
            }
        }
    }

    $btnEmpezar = $("#empezar");
    $partidas = $("#partidas");
    $mensajes = $("#mensajes");
    var partidaActual;
    var nombre;
    var partidaListItem = "<div id='{Pais}_{Nombre}item'>Pais: {Pais} Usuario:{Nombre} <button id='{Pais}_{Nombre}'>Jugar</button></div>";

    // A simple templating method for replacing placeholders enclosed in curly braces.
    if (!String.prototype.supplant) {
        String.prototype.supplant = function (o) {
            return this.replace(/{([^{}]*)}/g,
                function (a, b) {
                    var r = o[b];
                    return typeof r === 'string' || typeof r === 'number' ? r : a;
                }
            );
        };
    }

    function crearId(entity) {
        return entity.Pais + "_" + entity.Nombre;
    }

    function crearEntrada(solicitud) {
        if (solicitud.Nombre != nombre) {
            $partidas.append(partidaListItem.supplant(solicitud));
            $("#" + crearId(solicitud)).click(function (e) {
                var valores = e.currentTarget.id.split("_");
                servicioPartidas.server.jugar(valores[0], valores[1],nombre);
                return false;
            });
        }
    }

    servicioPartidas.client.nueva = function (solicitud) {
        if (solicitud.Nombre == nombre && solicitud.Pais == pais) {
            //si es tu partida deshabilita el botón de empezar.. ya estás jugando
            $btnEmpezar.text("Esperando a que llegue un jugador");
            $btnEmpezar.prop("disabled", true);
            $partidas.prop("disabled", true);
        }
        else {            
            //si no es tu partida saca la lista
            crearEntrada(solicitud);
        }
    };

    servicioPartidas.client.jugando = function (partida) {
        partidaActual = partida;
        $btnEmpezar.text("Jugando partida " + partida.Jugador1.Nombre + " contra " + partida.Jugador2.Nombre);
        $btnEmpezar.prop("disabled", true);
        $partidas.prop("disabled", true);
        pintarTablero(partida.Tablero);
    };

    function pintarTablero(tablero) {
        for (var row = 0; row < 3; row++) {
            for (var col = 0; col < 3; col++) {
                var $celda = $(".row" + row + " .col" + col);
                $celda.text(tablero[3 * row + col]);
            }
        }
    }

    servicioPartidas.client.finJuego = function (mensaje) {
        $mensajes.append(mensaje + "<br/>");
        $btnEmpezar.text("Empezar nuevo juego");
        $btnEmpezar.prop("disabled", false);
        $partidas.prop("disabled", false);
    }

    servicioPartidas.client.jugada = function (partida) {
        //cuando llega una jugada de nuestra partida en curso
        //pintamos el tablero
        pintarTablero(partida.Tablero);        
    }

    //los mensajes también irán apareciendo
    servicioPartidas.client.mensaje = function (msg) {
        $mensajes.append(msg + "<br/>");
    }


    servicioPartidas.client.partidaEliminada = function (solicitud) {
        $("#" + crearId(solicitud) + "item").remove();
    }
});